<template>
	<div class="home">
		<!-- <Tabbar :leftText="member" :hidden='true'></Tabbar> -->
		<div style="width: 94%;position: absolute;right: 0px;top: 0px;display: flex;justify-content: space-between;align-items: center;padding: 15px 3%;">
			<div style="font-size: 14px;color: white;">
				{{member}}
			</div>
			<div>
				<img  src="../../assets/imgs/tabs/lang.png" @click="show = true"
					style="width: 20px;height :20px;margin-right: 10px;">
				<img    @click="$router.push('noticelist')" src="../../assets/imgs/tabs/noticew.png" style="width: 20px;height: 20px;margin-right: 10px;">
				<img    @click='downloadurl' src="../../assets/imgs/tabs/kf.png" style="width: 20px;height: 20px;">
			</div>
			
		</div>
	      <div style="height: 180px;"></div>
		<!-- <img src="../../assets/imgs/quotation/my11.png" style="width: 100%;height: 200px;"> -->

		<div style="text-align: center;font-size: 15px;margin-top: -90px;">
			<img src="../../assets/imgs/tabs/logo.png" style="width: 140px;height:140px ;">

			<div style="margin: 20px 0 10px 0;color: #fff;font-size: 18px;">
				{{$t('textTrans.总余额')}}
			</div>
			<div style="color: #00A170;font-size: 18px;">
				{{account[0]}}TRX
			</div>

			<div style="display: flex;align-items: center;justify-content: space-around;margin: 20px 0;">
				<div @click="$router.push({name:'pdraw'})"
				style="background: #B5F3EA;box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.04);border-radius: 10px;padding :10px 0;text-align: center; width:40%;display: flex;align-items: center;justify-content: center;">
					<img src="../../assets/imgs/quotation/my1.png" style="width: 20px;height:20px;margin-right: 10px;">
					{{$t('textTrans.存款')}}
				</div>
				<div @click="$router.push({name:'withdraw'})"
				style="background: #B5F3EA;box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.04);border-radius: 10px;padding :10px 0;text-align: center; width:40%;display: flex;align-items: center;justify-content: center;">
					<img src="../../assets/imgs/quotation/my2.png" style="width: 20px;height:20px;margin-right: 10px;"
						alt="">
					{{$t('textTrans.提款')}}
				</div>
			</div>
		</div>

		<div
			style="background: #B5F3EA;width:82%; box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.04);border-radius: 10px;padding: 13px 3%;margin: 10px auto;font-size: 14px;position: relative;">
			<div style="color: #999999;margin-bottom: 4px;margin-top: 5px;">
				TRX{{$t('textTrans.充值')}} {{$t('textTrans.数量')}} {{moneydata.active_account}} /
				{{userInfo.remittance_money}}TRX
			</div>
			<div style="color: #999999;margin-bottom: 4px;">
				{{$t('textTrans.充值TRX即可激活账户并开启提现功能')}}
			</div>
			<img src="../../assets/imgs/home/sx.png"
				style="width: 18px;height: 18px;position: absolute;top: 15px;right: 15px;" alt="">
		</div>
		<div
			style="width:88%; box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.04);border-radius: 10px;padding: 10px 0px;margin: 10px auto;background: #B5F3EA;">
			<div style="font-size: 16px;font-weight: 550;text-indent: 30px;">
				{{$t('textTrans.应用服务')}}
			</div>
			<div class="myOrder">
				<div class="cell" @click="$router.push('myteam')">
					<img src="../../assets/imgs/quotation/my4.png" alt class="inviter" />
					<div style="font-size: 14px">{{$t('textTrans.团队')}}</div>
				</div>
				<div class="cell" @click="$router.push('income')">
					<img src="../../assets/imgs/quotation/my5.png" alt class="inviter" />
					<div style="font-size: 14px">{{$t('textTrans.利润表')}}</div>
				</div>
				<div class="cell" @click="$router.push('pdrawChange')">
					<img src="../../assets/imgs/quotation/my10.png" alt class="inviter" />
					<div style="font-size: 14px">{{$t('textTrans.转入推广账户')}}</div>
				</div>
				<div class="cell" @click="$router.push('onLine')">
					<img src="../../assets/imgs/quotation/my6.png" alt class="inviter" />
					<div style="font-size: 14px">{{$t('textTrans.分享')}}</div>
				</div>
				<div class="cell" @click="$router.push('noticelist')">
					<img src="../../assets/imgs/quotation/my7.png" alt class="inviter" />
					<div style="font-size: 14px">{{$t('textTrans.公告')}}</div>
				</div>
				<div class="cell" @click="downloadurl">
					<img src="../../assets/imgs/quotation/my8.png" alt class="inviter" />
					<div style="font-size: 14px">APP</div>
				</div>
			
				<div class="cell" @click="$router.push('setpass')">
					<img src="../../assets/imgs/home/homemm.png" alt class="inviter" />
					<div style="font-size: 14px">{{$t('textTrans.修改登录密码')}}</div>
				</div>
				<div class="cell" @click="$router.push('setpasspay')">
					<img src="../../assets/imgs/home/homepm.png" alt class="inviter" />
					<div style="font-size: 14px">{{$t('textTrans.修改支付密码')}}</div>
				</div>
				<div class="cell" @click="upout()">
					<img src="../../assets/imgs/quotation/my9.png" alt class="inviter" />
					<div style="font-size: 14px">{{$t('textTrans.登出')}}</div>
				</div>
			</div>
		</div>
		<!-- <van-action-sheet v-model="changeshow" :actions="actions" @select="onSelect" /> -->
		<van-action-sheet v-model="show" :actions="actions" :cancel-text="$t('textTrans.取消')" close-on-click-action
			@select="getLang" @cancel="show = false" />
	</div>
</template>

<script>
	import {
		userInfo,
		download,
		account
	} from "@/api/personal";
	// import {
	// 	userInfo,
	// 	homePage,
	// } from "@/api/personal";
	import {
		userAccount
	} from "@/api/home";
	export default {
		data() {
			return {
				show: false,
				actions: [{
					name: this.$i18n.t("textTrans.英语"),
				}, {
					name:  this.$i18n.t("textTrans.阿拉伯"),
				}, {
					name:  this.$i18n.t("textTrans.德国"),
				}, {
					name: this.$i18n.t("textTrans.西班牙"),
				}, {
					name: this.$i18n.t("textTrans.法国"),
				}, {
					name:  this.$i18n.t("textTrans.印度尼西亚"),
				}, {
					name:  this.$i18n.t("textTrans.日语"),
				}, {
					name: this.$i18n.t("textTrans.韩语"),
				}, {
					name: this.$i18n.t("textTrans.葡萄牙"),
				}, {
					name: this.$i18n.t("textTrans.土耳其"),
				}, {
					name: this.$i18n.t("textTrans.中文繁体"),
				}],
				member: '',
				userInfo: {},
				moneydata: {},
				account: {},
				changeshow: false,
			};
		},
		created() {
			account().then(res => {
				this.account = res
			})
			this.getUser();
		},
			
		methods: {
			getLang(e) {
				console.log(e.name)
				if (e.name == this.$i18n.t("textTrans.英语")) {
					this.$i18n.locale = 'en';
					localStorage.setItem('lanage', '1')
					localStorage.setItem('lanagetype', 'en')
				} else if (e.name == this.$i18n.t("textTrans.阿拉伯")) {
					this.$i18n.locale = 'alb';
					localStorage.setItem('lanage', '8')
					localStorage.setItem('lanagetype', 'alb')
				} else if (e.name == this.$i18n.t("textTrans.德语")) {
					this.$i18n.locale = 'dg';
					localStorage.setItem('lanage', '5')
					localStorage.setItem('lanagetype', 'dg')
				} else if (e.name == this.$i18n.t("textTrans.西班牙")) {
					this.$i18n.locale = 'xby';
					localStorage.setItem('lanage', '10')
					localStorage.setItem('lanagetype', 'xby')
				} else if (e.name == this.$i18n.t("textTrans.法语")) {
					this.$i18n.locale = 'fg';
					localStorage.setItem('lanage', '7')
					localStorage.setItem('lanagetype', 'fg')
				} else if (e.name == this.$i18n.t("textTrans.印度尼西亚")) {
					this.$i18n.locale = 'yn';
					localStorage.setItem('lanage', '3')
					localStorage.setItem('lanagetype', 'yn')
				} else if (e.name == this.$i18n.t("textTrans.日语")) {
					this.$i18n.locale = 'rb';
					localStorage.setItem('lanage', '6')
					localStorage.setItem('lanagetype', 'rb')
				} else if (e.name == this.$i18n.t("textTrans.韩语")) {
					this.$i18n.locale = 'hg';
					localStorage.setItem('lanage', '4')
					localStorage.setItem('lanagetype', 'hg')
				} else if (e.name == this.$i18n.t("textTrans.葡萄牙")) {
					this.$i18n.locale = 'pty';
					localStorage.setItem('lanage', '2')
					localStorage.setItem('lanagetype', 'pty')
				} else if (e.name ==  this.$i18n.t("textTrans.土耳其")) {
					this.$i18n.locale = 'trq';
					localStorage.setItem('lanage', '9')
					localStorage.setItem('lanagetype', 'trq')
				} else if (e.name == this.$i18n.t("textTrans.中文繁体")) {
					this.$i18n.locale = 'zhf';
					localStorage.setItem('lanage', '11')
					localStorage.setItem('lanagetype', 'zhf')
				}
				location.reload();
			},
			downloadurl() {
				window.location.href = this.moneydata.download_url
			},
			upout() {
				localStorage.removeItem('usertoken')
				this.$router.push({
					name: 'login'
				})
			},
			onSelect(e) {
				if (e.name == "切换账号") {
					this.$router.push({
						name: "changeuser"
					});
				} else {
					this.$router.push({
						name: "adduser"
					});
				}
			},
			changetype() {
				this.changeshow = true;
			},
			gourlw() {
				window.location.href =
					"https://huyowang.com/wechat/php/app.php?widget-mobile";
			},
			getUser() {
				userInfo().then((res) => {
					this.userInfo = res;
					const start = res.member.slice(0, 3);
					const end = res.member.slice(-4);
					this.member = `${start}***${end}`;
					// userInfo.member
				});
				download().then((res) => {
					this.moneydata = res;
				});
			},
			toAll() {
				this.$router.push({
					path: "myOrder",
					query: {
						type: 0,
					},
				});
			},
			goUrl(url) {
				this.$router.push(url);
			},
		},
	};
</script>
<style lang="less" scoped>
	.user-account {
		border-radius: 5px;
		background: #bededd;
		padding: 10px 30px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: -10px auto;
		z-index: 999;
	}


	.changecls {
		position: absolute;
		right: 30px;
		top: 80px;
		background: white;
		color: rgb(111, 186, 255);
		border-radius: 5px;
		padding: 4px 10px;
	}

	.home {
		width: 100%;
		padding-bottom: 60px;
		background: url('../../assets/imgs/home/background.png') no-repeat;
		background-size: 100% 100%; 
		position: relative;
	}

	.wallet-box {
		padding: 20px;
		color: #999999;
	}

	.personalTop {
		box-sizing: border-box;
		width: 100%;

		// background: url(../../assets/imgs/personal/backrr.png) 0 0 no-repeat;
		// background-size: 100% 100%;
		box-sizing: border-box;
		padding: 10px 15px;
		font-size: 16px;
		color: #333;

		.top_nav {
			background-color: white;
			width: 100%;
			margin-top: 10px;
			box-shadow: 0px 0px 10px 0px rgba(153, 153, 153, 0.2);
			height: 40px;
			line-height: 40px;
			border-radius: 5px;
			display: flex;
			align-items: center;

			img {
				margin: 0 8px;
				width: 20px;
			}
		}

		.toporder {
			width: 100%;
			margin-top: 25px;

			/deep/ .van-grid-item__content {
				padding: 0;
				background: transparent;
			}

			img {
				width: 25px;
				height: 23px;
			}

			p {
				font-size: 12px;
				padding-bottom: 0;
				padding-top: 5px;
				margin-top: 5px;
				margin-bottom: 0;
				color: white;
			}
		}

		.topTitle {
			text-align: center;
		}

		.topUser {
			padding: 10px 10px 30px 10px;
			border-radius: 10px 10px 0 0;
			background: linear-gradient(270deg, #326964 0%, #326964 100%);
			overflow: hidden;
			color: white;

			.userImg {
				width: 60px;
				height: 60px;
				margin-right: 20px;
				border-radius: 50%;
			}

			.userInfo {
				padding-top: 15px;

				.userPhone {
					display: flex;
					width: 190px;
					justify-content: space-between;
					font-size: 16px;
					margin-top: 10px;
				}
			}

			.rightEl {
				margin-top: 5px;

				font-size: 13px;

				img {
					width: 20px;
				}

				.van-icon {
					/* font-size:30px; */
					/* margin-top:100px; */
				}
			}
		}
	}

	.myOrder {
		width: 100%;
		margin: 0px auto;
		color: #333;
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;

		.cell {
			width: 30%;
			margin-left: 2.5%;
			text-align: center;
			border-radius: 5px;
			margin-top: 6px;
			margin-bottom: 6px;

			img {
				width: 50px;
				height: 50px;
			}
		}

		// .orderTop {
		// 	display: flex;
		// 	align-items: center;
		// 	padding-bottom: 9px;
		// 	box-sizing: border-box;
		// 	padding: 18px 9px 15px 10.5px;
		// 	overflow: hidden;

		// 	.orderTitle {
		// 		padding: 0 10px;
		// 		width: 100px;
		// 		font-size: 14px;
		// 	}

		// 	.rightEl {
		// 		color: #424242;
		// 		font-size: 12px;
		// 		display: flex;
		// 		align-items: center;
		// 		font-weight: normal;
		// 	}
		// }

		// .orderBtm {
		// 	border-radius: 15px;
		// 	color: white;

		// 	/deep/ .van-grid-item__content {
		// 		padding-bottom: 10px;
		// 		border-radius: 10px;
		// 		background: transparent;
		// 	}

		// 	img {
		// 		width: 27px;
		// 		height: 25px;
		// 	}

		// 	p {
		// 		color: white;
		// 		font-size: 13px;
		// 	}
		// }
	}

	.gap {
		width: 100%;
		height: 10px;
		background: #f7f7f7;
	}

	.appsBtm {
		img {
			width: 23px;
			height: 23px;
		}
	}

	.inviter {
		margin-top: 5px;
		width: 24px;
		height: 24px;
		// height: 18px;
	}

	.invite {
		width: 36px;
		height: 36px;
		// height: 18px;
	}

	.setting {
		width: 19.5px;
		height: 19px;
		margin-right: 8.5px;
	}
</style>
